<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/css.css"/>
  <script src="js/jquery-1.12.2.js"></script>
  <script>
      //页面加载的事件
      $(function () {

        //显示对话框
        $("#j_btnAddData").click(function () {
          $("#j_formAdd").show();//显示对话框
          $("#j_mask").show();//显示遮挡层
        });
        function closeKuang() {
          $("#j_formAdd").hide();//隐藏对话框
          $("#j_mask").hide();//隐藏遮挡层
        }
        //点击X关闭对话框
        $("#j_hideFormAdd").click(function () {
          closeKuang();
        });

        //添加数据的案例
        $("#j_btnAdd").click(function () {
          //先获取课程的文本框对象
          var j_txtLesson=$("#j_txtLesson");
          //获取学院文本框的对象
          var j_txtBelSch=$("#j_txtBelSch");

          //创建行和列并直接加入到tbody中
          $("<tr><td>"+j_txtLesson.val()+"</td><td>"+j_txtBelSch.val()+"</td><td><a href='javascrip:;' class='get'>删除</a></td></tr>").appendTo($("#j_tb"));

          //关闭对话框
          closeKuang();
          //清空课程的文本框
          j_txtLesson.val("");
          j_txtBelSch.val("传智播客-前端与移动开发学院");
        });
        //页面加载后就为a注册点击事件,使用的是on的方式

        $("#j_tb").on("click",".get",function () {
          //当前被点击的a的父级元素的父级元素直接自杀
          $(this).parent().parent().remove();
        });
      });
  </script>

</head>

<body>
<div class="wrap">
  <div>
    <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
  </div>
  <table>
    <thead>
    <tr>
      <th>课程名称</th>
      <th>所属学院</th>
      <th>已学会</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>JavaScript</td>
      <td>前端学院</td>
      <td><a href="javascrip:;" class="get">删除</a></td>
    </tr>
    <tr>
      <td>css</td>
      <td>前端学院</td>
      <td><a href="javascrip:;" class="get">删除</a></td>
    </tr>
    <tr>
      <td>html</td>
      <td>前端学院</td>
      <td><a href="javascrip:;" class="get">删除</a></td>
    </tr>
    <tr>
      <td>jQuery</td>
      <td>移动学院</td>
      <td><a href="javascrip:;" class="get">删除</a></td>
    </tr>
    </tbody>
  </table>
</div>
<div id="j_mask" class="mask"></div><!--遮挡的div-->
<div id="j_formAdd" class="form-add">
  <div class="form-add-title">
    <span>添加数据</span>

    <div id="j_hideFormAdd">x</div>
  </div>
  <div class="form-item">
    <label class="lb" for="j_txtLesson">课程名称：</label>
    <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
  </div>
  <div class="form-item">
    <label class="lb" for="j_txtBelSch">所属：</label>
    <input class="txt" type="text" id="j_txtBelSch" value="移动开发">
  </div>
  <div class="form-submit">
    <input type="button" value="添加" id="j_btnAdd">
  </div>
</div>


</body>

</html>